<!--
  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
 
 
<div class="tags-box" >
    <input type="text"
           name="{{elementName}}"
           class="new-tag-input"
           data-ng-class="{'view-mode':sdcDisabled}"
           data-ng-change="validateName()"
           data-ng-model="newTag"
           data-ng-maxlength="50"
           data-ng-pattern="pattern"
           data-tests-id="i-sdc-tag-input"
           maxlength="50"
           sdc-keyboard-events
           key-enter="addTag"

        />
    <perfect-scrollbar class="perfect-scrollbar tags-wrapper"  data-ng-class="{'view-mode':sdcDisabled}" include-padding="true">
        <div data-tests-id="i-sdc-tags-wrapper" >
            <div class="group-tag" data-ng-show="specialTag">
                <sdc-tag data-hide-tooltip="true" data-hide-delete="true"
                         data-tag-data="{tag: specialTag, id: specialTag }"></sdc-tag>
            </div>
            <div class="group-tag" ng-repeat="tag in tags track by $index">
                <sdc-tag ng-if="tag != specialTag" data-on-delete="deleteTag(tag)" sdc-disable="sdcDisabled" data-hide-delete="sdcDisabled" data-hide-tooltip="true" data-tag-data="{tag: tag, id: tag }"></sdc-tag>
            </div>
        </div>
    </perfect-scrollbar>
</div>
